import React, { Component } from 'react';
/* 
  1.new props 从父组件传入子组件进行更新


  子组件

  初次渲染
  1. getDerivedStateFromProps: {msg: "牛"}
  3. 执行render函数
  初次渲染

  更新传入props导致更新:
  1. getDerivedStateFromProps: {msg: "^(*￣(oo)￣)^"}
  2. shouldComponentUpdate
  3. 执行render函数
  4. getSnapshotBeforeUpdate
  5. componentDidupdate
  来自 getSnapshotBeforeUpdate的值: 100
*/
/* 子组件 */
class Demo extends Component {
  state={};
  
  static getDerivedStateFromProps(props,state){
    console.log("1. getDerivedStateFromProps:",props)
    return null;
  }

  shouldComponentUpdate(nextProps,nextState){
    console.log("2. shouldComponentUpdate");
    return true; //组件更新
  }

  render() {
    console.log("3. 执行render函数");
    return (
      <h1>Demo组件 {this.props.msg}</h1>
    );
  }

  getSnapshotBeforeUpdate(props,state){
    console.log("4. getSnapshotBeforeUpdate")
    return 100;
  }

  componentDidUpdate(props,state,snapshot){
    console.log("5. componentDidupdate")
    console.log("来自 getSnapshotBeforeUpdate的值:",snapshot)
  }
}

/* 父组件 */
class App extends Component {
  state = {
    msg:"牛"
  }
  handleClick = ()=>{
    this.setState({
      msg:"^(*￣(oo)￣)^"
    })
  }
  render(){
    return (
      <div>
        <Demo msg={this.state.msg}></Demo>
        <button onClick={this.handleClick}>变^(*￣(oo)￣)^</button>
      </div>
    )
  }
}

export default App;
